<template>
<transition name="expand">
  <section v-show="hide" class="sec">
    <header>
        <div class="header_top">
            <span @click="backHome"></span>
            <p>选择城市</p>
        </div>
        <div class="header_search">
            <input type="text" v-model="workd" placeholder="请输入城市名称">
        </div>
    </header>
    <main>
        <section class="main_1">
            <p>当前定位城市</p>
            <div>
                <a href="">北京</a>
            </div>
        </section>
        <section class="main_2" >
            <div v-for="(v,k) in city">
                <p @click="click(k)">{{k}}</p>
                <ul :class="k==key?'block':''">
                    <li v-for="f in v" :class="f.name==Nval?'':'none'">{{f.name}}</li>
                </ul>
            </div>
        </section>
        <section class="main_3">
            <a href="" v-for="(v,k) in city">{{k}}</a>
        </section>
    </main>
  </section>
  </transition>
</template>
<script>
export default {
    data(){
        return{
            city:{},
            show:true,
            key:"A",
            workd: '',
            Nval:""
        }
    },
    methods:{
        backHome(){
            this.$store.commit("changeState");
            document.body.style.overflow="scroll";
        },
        click(k){
            this.key=k
            console.log(this.Nval)
        },
        request(){
            this.$http({
                url:"./static/address.json",
                method:"get"
            }).then(function(res){
                let Data = res.body.data
                let city ={}
                for(var i=0;i<Data.length;i++){
                    let first = Data[i].pinyin.substr(0,1)
                    if (city[first]){

                    }else{
                        city[first]=[]
                    }
                    for (let key in city){
                        if (first==key){
                            city[key].push(Data[i])
                        }
                    }
                }
                this.city = city;
            })
        }
    },
    mounted(){
        this.request()
    },
    computed:{
        hide(){
            return this.$store.state.hide;
        }
    },
    watch: {
        workd(newval,oldval){
            this.Nval = newval
        }
    }
}
</script>

<style scoped>
        /*  使页面控制在最前沿*/
.sec{
    position: absolute;
     z-index: 99; 
    left: 0;
    top: 0;
     right: 0;
    bottom: 0; 
    overflow:scroll;
}
    /*  动画效果*/
.expand-enter-active,.expand-leave-active{
    transition: all 1s;
}
.expand-enter,.expand-leave-active{
    opacity:0;
}
.sec::-webkit-scrollbar{
    width: 0;
    height: 0;
}
body{
    font-size: 0.3467rem;
}
    /*  头部的样式*/
header{
    position: fixed;
    width: 100%;
    z-index: 99;
}
.header_top{
    text-align: center;
    height: 1.3333rem;
    line-height: 1.3333rem;
    width: 100%;
    border-bottom: 0.0133rem solid #d5d5d5;
    border-top: 0.0133rem solid #d5d5d5;
    font-size: 0.5333rem;
    background: #f8f8f8;
}
.header_top span::after{
    content: "";
    width: 0.4333rem;
    height: 0.4333rem;
    border-top: 0.0233rem solid #d30775;
    border-right: 0.0233rem solid #d30775;
    transform: rotate(225deg);
    position: absolute;
    top: 0.4rem;
    left: .5rem;
}
.header_search input{
    width: 9.1867rem;
    height: 0.96rem;
    border: none;
    border: 0.0133rem solid #d5d5d5;
    border-radius: .1rem;
    text-indent: 0.6667rem;
    font-size: 0.3467rem;
}
.header_search{
    height: 1.4667rem;
    line-height: 1.4667rem;
    width: 100%;
    text-align: center;
    background: #f8f8f8;
}
    /*主体的结构样式*/
main{
    position: absolute;
    top: 2.77797rem;
    width:100%;
    background: white;
}
    /*  主体第一块第的数据*/
.main_1 div{
    background: #fff;
    height: 1.8667rem;
    display: flex;
    align-items: center;
    border-bottom: 0.0133rem solid #d5d5d5;
    border-top: 0.0133rem solid #d5d5d5;
    padding:0 0.3333rem;
}
.main_1 a{
    width: 2.5333rem;
    height: 1.0267rem;
    display: block;
    text-align: center;
    line-height: 1.0267rem;
    color: #d30775;
    border:0.0133rem solid #d30775;
}
.main_1 p{
    background: #f8f8f8;
    padding: 0.2667rem;
}
    /*主体第二部分的样式*/
.main_2 div p{
    background: #f8f8f8;
    padding: 0.2667rem;
    border-bottom: 0.0133rem solid #d5d5d5;
    border-top: 0.0133rem solid #d5d5d5;
}
.main_2 div p::after{
    content: "";
    width: 0.2333rem;
    height: 0.2333rem;
    border-top: 0.0233rem solid #aaaaaa;
    border-right: 0.0233rem solid #aaaaaa;
    transform: rotate(135deg);
    float: right;
    margin-right: 1rem;
}
.main_2 div li{
    height: 1.0667rem;
    line-height: 1.0667rem;
    margin:0 0.2667rem;
    border-bottom: 0.0133rem solid #d5d5d5;
}
.main_2 div li:last-child{
    border-bottom: none;
}
.main_2 ul{
    display: none;
}
.main_2 .block{
    display: block;
}
    /*主体第三部分的样式结构*/
.main_3{
    position: fixed;
    z-index: 99;
    display: flex;
    flex-flow: column;
    align-items: center;
    background: rgba(255, 255, 255, .5);
    width: 1.0667rem;
    padding: 1rem 0;
    right: 0;
    top: 2.77797rem;
    height: 100%;
}
.main_3 a{
    padding-bottom: .2rem;
}
.none{
    display: none,
}
</style>
